<!--
 * @Description: 设计界面右侧配置
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:26
 * @LastEditTime: 2021-09-16 09:20:42
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\bpmn\panel\designPanel.vue
-->
<template>
  <div class="bpmn-panel" style="display: none;">
    <div v-if="current === '1'" class="tabs1">
      <a-tabs>
        <a-tab-pane key="1" tab="基础配置">
          <process-basic-config
            :formData="formData"
            :modeler="modeler"
            :processData="processData"
            :element="element"
            :isEdit="isEdit"
          ></process-basic-config>
        </a-tab-pane>
        <a-tab-pane key="2" tab="权限设置" force-render>
          <permission-setting
            :modeler="modeler"
            :processData="processData"
            :element="element"
            :authData="authData"
            :isProcess="isProcess"
            @setStarterData="setStarterData"
            :isEdit="isEdit"
          ></permission-setting>
        </a-tab-pane>
        <!-- <a-tab-pane key="3" tab="高级设置" force-render>
          <advanced-setting
              :modeler="modeler"
              :element="element"
              :advancedData="advancedData"
              @setAdvancedData="setAdvancedData"
          ></advanced-setting>
        </a-tab-pane> -->
        <!-- <a-tab-pane key="4" tab="其他设置" force-render>
          <other-setting
              :modeler="modeler"
              :processData="processData"
              :element="element"
              :isEdit="isEdit"
          ></other-setting>
        </a-tab-pane> -->
      </a-tabs>
    </div>

    <a-tabs v-else-if="current === '2'">
      <a-tab-pane key="1" tab="基础配置">
        <node-basic-config
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formData="formData"
        >
        </node-basic-config>
      </a-tab-pane>
      <a-tab-pane key="2" tab="表单配置" force-render>
        <form-panel
          ref="formPanel"
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formFieldLists="formFieldLists"
          :updateList="updateList"
        ></form-panel>
      </a-tab-pane>
      <a-tab-pane key="3" tab="设置审批人" force-render>
        <approved-by
          ref="approvedBy"
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formData="formData"
          :memberFieldLists="memberFieldList"
          @modifyFormData="modifyFormData"
        ></approved-by>
      </a-tab-pane>
      <a-tab-pane key="4" tab="会签设置" force-render>
        <multiinstance-setting
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formData="formData"
        ></multiinstance-setting>
      </a-tab-pane>
      <a-tab-pane key="5" tab="按钮设置" force-render>
        <button-setting
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formData="formData"
        ></button-setting>
      </a-tab-pane>
      <!-- <a-tab-pane key="6" tab="超时处理" force-render>
        <timeout-processing
          :modeler="modeler"
					:nodeElement="nodeElement"
					:formData="formData"
        ></timeout-processing>
      </a-tab-pane> -->
      <!--      <a-tab-pane key="6" tab="其他设置" force-render>-->
      <!--        <other-setting-->
      <!--            :modeler="modeler"-->
      <!--            :processData="processData"-->
      <!--            :element="element"-->
      <!--            :isEdit="isEdit"-->
      <!--        ></other-setting>-->
      <!--      </a-tab-pane>-->
    </a-tabs>

    <a-tabs v-else-if="current === '3'">
      <a-tab-pane key="1" tab="基础配置">
        <node-basic-config
          nodeType="line"
          :modeler="modeler"
          :nodeElement="nodeElement"
          :formData="formData"
        >
        </node-basic-config>
      </a-tab-pane>
    </a-tabs>

    <div v-else-if="current === '4'" class="tabs1">
      <a-tabs>
        <a-tab-pane key="1" tab="基础配置">
          <node-basic-config
            :modeler="modeler"
            :nodeElement="nodeElement"
            :formData="formData"
          >
          </node-basic-config>
        </a-tab-pane>
        <a-tab-pane key="2" tab="定时设置" force-render>
          <timing-setting
            :modeler="modeler"
            :formData="formData"
            :nodeElement="nodeElement"
          ></timing-setting>
        </a-tab-pane>
      </a-tabs>
    </div>

    <div v-else-if="current === '5'" class="tabs1">
      <a-tabs>
        <a-tab-pane key="1" tab="基础配置">
          <node-basic-config
            :modeler="modeler"
            :nodeElement="nodeElement"
            :formData="formData"
          >
          </node-basic-config>
        </a-tab-pane>
        <a-tab-pane key="2" tab="异步设置" force-render>
          <async-setting
            :modeler="modeler"
            :formData="formData"
            :nodeElement="nodeElement"
          ></async-setting>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="semicircle" @click="semicircleClick">
      <a-icon :type="fold ? 'left' : 'right'" />
    </div>
  </div>
</template>

<script>
import ProcessBasicConfig from "./ProcessBasicConfig";
import PermissionSetting from "./PermissionSetting";
import AdvancedSetting from "./AdvancedSetting";
import OtherSetting from "./OtherSetting";
import NodeBasicConfig from "./NodeBasicConfig";
import MultiinstanceSetting from "./MultiinstanceSetting";
import ApprovedBy from "./ApprovedBy";
import CirculatedBy from "./CirculatedBy";
import FormSetting from "./FormSetting";
import formPanel from "./formPanel";
import ButtonSetting from "./ButtonSetting";
import TimingSetting from "./TimingSetting.vue";
import AsyncSetting from "./AsyncSetting.vue";
export default {
  name: "index",
  components: {
    ProcessBasicConfig,
    PermissionSetting,
    AdvancedSetting,
    OtherSetting,
    NodeBasicConfig,
    ApprovedBy,
    CirculatedBy,
    FormSetting,
    formPanel,
    ButtonSetting,
    MultiinstanceSetting,
    TimingSetting,
    AsyncSetting,
  },
  data() {
    return {
      configTab: "node",
      element: {},
      nodeElement: {},
      formData: {},
      isProcess: false,
      authData: {
        authType: "all",
      },
      advancedData: {},
      actMyNodeFormFieldList: [], //数据传递列表
      actMyNodeFormList: [], //节点表单uuid
      timeoutList: [], //超时处理
      formBtnList: [], //按钮
      notificationList: [], //通知
      formFieldArray: [], //动态表单配置
      formDesignUrl: "", //表单
      formDesignDetailUrl: "", //表单详情接口地址
      nodeFormUpdatePathUrl: "", //表单更新接口地址
      nodeFormSavePathUrl: "", //表单保存接口地址
      current: "1",
      permissionType: "all",
      permissionValue: "", //权限值
      formModuleType: "", //表单类型
      processData: {},
      fold: true,
      initial: true,
      formFieldLists: [],
      updateList: [],
      memberFieldList: [],
    };
  },
  props: {
    modeler: {
      type: Object,
      required: true,
    },
    process: {
      type: Object,
      required: true,
    },
    isEdit: {
      type: Boolean,
    },
  },
  computed: {
    nodeName() {
      if (this.element) {
        const bizObj = this.element.businessObject;
        const type = bizObj?.eventDefinitions
          ? bizObj.eventDefinitions[0].$type
          : bizObj.$type;
        return NodeName[type] || type;
      }
      return "";
    },
  },
  mounted() {
    this.handleModeler();
    this.processData = this.process;
    setTimeout(() => {
      this.getFormDesign();
    }, 100);
    this.getUpdateList();
    this.initProcessModeler();
  },
  methods: {
    initProcessModeler() {
      window.processInstances = {
        modeler: this.modeler,
        modeling: this.modeler.get("modeling"),
        eventBus: this.modeler.get("eventBus"),
        bpmnFactory: this.modeler.get("bpmnFactory"),
        translate: this.modeler.get("translate"),
      };
    },
    getFormDesign() {
      this.$bus.$on(
        "getFormDesign",
        (data, formName, formType, formUuid, formLayout) => {
          this.formFieldLists = [];
          this.memberFieldList = [];
          if (data) {
            const memberFieldList = [];
            let list = JSON.parse(data).list;
            list.forEach((item, index) => {
              this.formFieldLists.push({
                filed: item.model,
                filedName: item.label,
                filedType: item.type,
                formUuid: formUuid,
                modelType: formType,
                isEdit: false,
                isLook: false,
                fieldIndex: index,
                formLayout: formLayout,
              });
              memberFieldList.push({
                label: item.label,
                value: item.options.defaultValue,
                filed: item.model,
              });
              this.memberFieldList = memberFieldList;
            });
            this.updateProperties({
              formName,
              formType,
            });
          } else {
            this.formFieldLists.push({
              formUuid: formUuid,
              modelType: formType,
            });
            delete this.formData.candidateGroups;
            delete this.formData.candidateGroupsName;
          }
        }
      );
    },
    getUpdateList() {
      this.$bus.$on("updateList", (data) => {
        this.updateList = data;
      });
    },
    // 页面初始化设置配置数据
    getFormList(e) {
      this.current = "1";
      this.isProcess = false;
      this.formBtnList = []; //按钮配置
      this.timeoutList = []; //超时处理
      this.notificationList = []; //通知
      this.formFieldArray = []; //动态表单
      this.permissionType = this.permissionType ? this.permissionType : "all";
    },
    // 保存时获取配置参数
    getFormData() {
      let process = this.process;
      process.timeoutList = this.timeoutList;
      process.actMyNodeFormFieldList = this.actMyNodeFormFieldList; // 数据传递列表
      process.actMyNodeFormList = this.actMyNodeFormList; // 每个节点表单uuid
      process.formBtnList = this.formBtnList;
      process.formNoticeList = this.notificationList;
      process.permissionType = this.permissionType;
      process.permissionValue = this.permissionValue;
      process.formModuleType = this.formModuleType;
      process.sign = this.advancedData.sign;
      process.data = this.formData;
      process.formFieldList = this.formFieldArray;
      return process;
    },
    // 流程模型节点变化
    handleModeler() {
      const _this = this;
      this.modeler.on("shape.added", (e) => {
        let element = e.element;
        if (this.isImplicitRoot(element)) {
          return;
        }
        this.element = element;
        /* 按钮通知数据配置后显示不正常处理*/
        let businessObjectLoad = element.businessObject;
        // 用户节点
        if (this.element.type === "bpmn:UserTask") {
          if (businessObjectLoad.btnGroup) {
            //按钮数据
            let btnGroup = businessObjectLoad.btnGroup
              ? JSON.parse(businessObjectLoad.btnGroup)
              : [];
            let formBtnList = this.formBtnList.filter(
              (obj) => obj.id != businessObjectLoad.id
            );
            btnGroup.forEach((e) => {
              (e.id = businessObjectLoad.id), (e.modalKey = this.process.key);
              e.nodeFormPath = businessObjectLoad.formDesignUrl;
              e.nodeFormEditPath = businessObjectLoad.formDesignDetailUrl;
              e.nodeFormUpdatePath = businessObjectLoad.nodeFormUpdatePathUrl;
              e.nodeFormSavePath = businessObjectLoad.nodeFormSavePathUrl;
              e.whetherUpdate = businessObjectLoad.formEditable;
              formBtnList.push(e);
            });
            this.formBtnList = formBtnList;
          }
          // 动态表单
          if (businessObjectLoad.formFieldList) {
            /* 表单字段 */
            let formFieldArray = businessObjectLoad.formFieldList
              ? JSON.parse(businessObjectLoad.formFieldList)
              : [];
            let formFieldArray1 = this.formFieldArray.filter(
              (obj) => obj.id != businessObjectLoad.id
            );
            formFieldArray.forEach((e) => {
              (e.id = businessObjectLoad.id), (e.modalKey = this.process.key);
              formFieldArray1.push(e);
            });
            this.formFieldArray = formFieldArray1;
            this.formModuleType = businessObjectLoad.formModuleType;
          }
          // 节点通知获取
          if (businessObjectLoad.notification) {
            //通知数据
            let notificationList =
              businessObjectLoad.notification &&
              businessObjectLoad.notification.length != 0
                ? businessObjectLoad.notification.split(",")
                : [];
            let notificationList1 = this.notificationList.filter(
              (obj) => obj.nodeId != businessObjectLoad.id
            );
            notificationList.forEach((e) => {
              notificationList1.push({
                noticeName: e,
                nodeId: businessObjectLoad.id,
                actDeModelKey: this.process.key,
              });
            });
            this.notificationList = notificationList1;
          }
          // 数据接受规则
          if (businessObjectLoad.$attrs.actMyNodeFormFieldList) {
            let transferDataGroup = JSON.parse(
              businessObjectLoad.$attrs.actMyNodeFormFieldList
            );
            let actMyNodeFormFieldList = this.actMyNodeFormFieldList.filter(
              (obj) => obj.postNodeId != businessObjectLoad.id
            );
            transferDataGroup.forEach((e) => {
              actMyNodeFormFieldList.push(e);
            });
            this.actMyNodeFormFieldList = actMyNodeFormFieldList;
          }
          // 节点表单uuid存储
          if (businessObjectLoad.formFieldList) {
            let actMyNodeFormListGroup = {
              nodeName: businessObjectLoad.name,
              nodeId: businessObjectLoad.id,
              formUuid: JSON.parse(businessObjectLoad.formFieldList)[0]
                .formUuid,
            };
            let actMyNodeFormList = this.actMyNodeFormList.filter(
              (obj) => obj.nodeId != businessObjectLoad.id
            );
            actMyNodeFormList.push(actMyNodeFormListGroup);
            this.actMyNodeFormList = actMyNodeFormList;
          }
        }
        if (this.element.type === "bpmn:BoundaryEvent") {
          if (Object.keys(businessObjectLoad.$attrs).length != 0) {
            let notificationList = businessObjectLoad.$attrs?.ifRemindNotification.split(
              ","
            );
            let notificationList1 = [];
            notificationList.forEach((e) => {
              notificationList1.push({
                noticeName: e,
                nodeId: businessObjectLoad.id,
                actDeModelKey: this.process.key,
              });
            });
            if (businessObjectLoad.$attrs.autoApproval === "true") {
              notificationList1.push({
                noticeName: "timerfired.autoApproval",
                nodeId: businessObjectLoad.id,
                actDeModelKey: this.process.key,
              });
            }
            this.notificationList.push(...notificationList1);
          }
        }
      });
      this.modeler.on("commandStack.changed", (e) => {
        _this.modeler.saveXML(
          {
            format: true,
          },
          function(err, xml) {
            _this.$emit("updateXml", xml);
          }
        );
      });
      this.modeler.on("selection.changed", (e) => {
        const element = e.newSelection[0];
        if (!element) {
          return;
        }
        this.modifyConfigTab(element);
        this.handleFormData(element);
      });
      this.modeler.on("element.changed", (e) => {
        const { element } = e;
        if (!element) {
          return;
        }
        this.handleFormData(element, "el");
      });
      // 点击节点获取节点相关属性
      this.modeler.on("element.click", (e) => {
        let panelDom = document.getElementsByClassName("bpmn-panel")[0];
        let semicircleDom = document.getElementsByClassName("semicircle")[0];
        if (this.fold && this.initial) {
          panelDom.removeAttribute("style");
          semicircleDom.removeAttribute("style");
          this.fold = !this.fold;
          this.initial = false;
        }

        const { element } = e;
        let _businessObject = element.businessObject;
        if (element.type == this.modeler._definitions.rootElements[0].$type) {
          this.modifyConfigTab(0);
          if (element.type == "bpmn:Process") {
            this.element = element;
            this.isProcess = true;
            this.current = "1";
            this.authData = {
              //权限数据配置
              authType: _businessObject.authType
                ? _businessObject.authType
                : "all",
              candidateStarterGroups: _businessObject.candidateStarterGroups,
              candidateStarterGroupsName:
                _businessObject.candidateStarterGroupsName,
              candidateStarterUsers: _businessObject.candidateStarterUsers,
              candidateStarterUsersName:
                _businessObject.candidateStarterUsersName,
            };
            this.advancedData = {
              sign: _businessObject.sign,
            };
          }
          // 流程信息
          this.processData.description = _businessObject.documentation
            ? _businessObject.documentation[0].text
            : "";
          this.processData.name = _businessObject.name;
          this.processData.id = _businessObject.id;
          this.processData.key = _businessObject.id;
          this.processData.batchApproval = _businessObject.$attrs.batchApproval; // 是否批量审批
          this.processData.ifMultiForm = _businessObject.$attrs.ifMultiForm; // 是否多表单
        } else {
          this.current = "2";
          this.isProcess = false;
          this.modifyConfigTab(1);
          if (element.type == "bpmn:UserTask") {
            this.formFieldLists.forEach((e) => {
              e.isEdit = false;
              e.isLook = false;
            });
            //结点处理人数据获取，处理数据配置后显示不正常
            if (_businessObject.useType === "assignee") {
              _this.formData.useType = "assignee";
              _this.formData.assignee = _businessObject.assignee;
              _this.formData.assigneeName = _businessObject.assigneeName;
            } else if (_businessObject.userType === "candidateUsers") {
              _this.formData.useType = "candidateUsers";
              _this.formData.candidateUsers = _businessObject.candidateUsers;
              _this.formData.candidateUsersName =
                _businessObject.candidateUsersName;
            } else if (_businessObject.userType === "processInitiator") {
              _this.formData.useType = "processInitiator";
              _this.formData.processInitiator =
                _businessObject.processInitiator;
            } else if (
              _businessObject.userType === "candidateGroups" ||
              _businessObject.userType === "department"
            ) {
              _this.formData.useType =
                _businessObject.userType === "candidateGroups"
                  ? "candidateGroups"
                  : "department";
              _this.formData.candidateGroups = _businessObject.candidateGroups;
              _this.formData.candidateGroupsName =
                _businessObject.candidateGroupsName;
            }
          }
          // if (element.type == "bpmn:StartEvent") {
          // 	_this.formData.formDesignUrl = _businessObject.formDesignUrl?_businessObject.formDesignUrl:'';		//外置表单路径配置
          // 	_this.formData.formDesignDetailUrl = _businessObject.formDesignDetailUrl?_businessObject.formDesignDetailUrl:'';		//外置表单路径配置
          // }
        }
        if (element.type == "bpmn:SequenceFlow") {
          this.current = "3";
          let _businessObject = element.businessObject;
          // _this.formData.sequenceFlow = _businessObject.conditionExpression ? _businessObject.conditionExpression.body : '${outcome == '同意'}'
        }
        if (
          element.type == "bpmn:BoundaryEvent" &&
          element.businessObject.eventDefinitions[0]?.$type ===
            "bpmn:TimerEventDefinition"
        ) {
          this.current = "4";
          let _businessObject = element.businessObject;
        }
        if (
          element.type == "bpmn:ExclusiveGateway" ||
          element.type == "bpmn:ParallelGateway" ||
          element.type == "bpmn:InclusiveGateway" ||
          element.type == "bpmn:ComplexGateway"
        ) {
          this.current = "5";
          let _businessObject = element.businessObject;
        }
      });
    },
    isImplicitRoot(element) {
      return element.id === "__implicitroot";
    },
    modifyConfigTab(element) {
      let configTab = "node";
      if (!element) {
        configTab = "process";
      }
      this.configTab = configTab;
    },
    updateProperties(properties) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, properties);
    },
    handleFormData(element, type) {
      let panelDom = document.getElementsByClassName("bpmn-panel")[0];
      let semicircleDom = document.getElementsByClassName("semicircle")[0];
      if (this.fold && this.initial) {
        panelDom.removeAttribute("style");
        semicircleDom.removeAttribute("style");
        this.fold = !this.fold;
        this.initial = false;
      }
      if (!element.id) {
        return;
      }
      let businessObject = element.businessObject;

      this.authData = {
        //获取节点权限设置
        authType: businessObject.authType ? businessObject.authType : "all",
        candidateStarterGroups: businessObject.candidateStarterGroups,
        candidateStarterGroupsName: businessObject.candidateStarterGroupsName,
        candidateStarterUsers: businessObject.candidateStarterUsers,
        candidateStarterUsersName: businessObject.candidateStarterUsersName,
      };
      this.advancedData = {
        sign: businessObject.sign,
      };
      this.formData = {
        //获取当前节点配置的数据
        type: element.type,
        id: businessObject.id,
        key: this.process.key,
        name: businessObject.name,
        userType: businessObject.userType,
        assignee: businessObject.assignee,
        assigneeName: businessObject.assigneeName,
        candidateUsersName: businessObject.candidateUsersName,
        candidateGroups: businessObject.candidateGroups,
        candidateGroupsName: businessObject.candidateGroupsName,
        candidateUsers: businessObject.candidateUsers,
        processInitiator: businessObject.processInitiator,
        sequenceFlow: businessObject.conditionExpression
          ? businessObject.conditionExpression.body
          : "",
        async: businessObject.async,
        isForCompensation: businessObject.isForCompensation,
        dueDate: businessObject.dueDate,
        priority: businessObject.priority,
        ruleVariablesInput: businessObject.ruleVariablesInput,
        rules: businessObject.rules,
        resultVariable: businessObject.resultVariable,
        exclude: businessObject.exclude,
        autoStoreVariables: businessObject.autoStoreVariables,
        triggerable: businessObject.triggerable,
        notification: businessObject.notification
          ? businessObject.notification.split(",")
          : [],
        skipExpression: businessObject.skipExpression,
        signalRefList: businessObject.$parent?.$attrs.signalRefList ?? [],
        messageRefList: businessObject.$parent?.$attrs.messageRefList ?? [],
        conditionalExpression: businessObject.$attrs.conditionalExpression,
        conditionalExpressionType:
          businessObject.$attrs.conditionalExpressionType,
        conditionalScript: businessObject.$attrs.conditionalScript,
        conditionalScriptType: businessObject.$attrs.conditionalScriptType,
        formDesignUrl: businessObject.formDesignUrl, //表单
        formDesignDetailUrl: businessObject.formDesignDetailUrl,
        nodeFormUpdatePathUrl: businessObject.nodeFormUpdatePathUrl,
        nodeFormSavePathUrl: businessObject.nodeFormSavePathUrl,
        formModuleType: businessObject.formModuleType,
        formEditable: Boolean(Number(businessObject.formEditable)),
        isSequential: businessObject.$attrs.isSequential,
        completeCondition: businessObject.completeCondition,
        percentage: businessObject.percentage,
      };
      let eventDefinitions = businessObject.get("eventDefinitions");
      if (eventDefinitions) {
        //定时器
        eventDefinitions.forEach((item) => {
          if (item.$type === "bpmn:TimerEventDefinition") {
            if (item["timeDate"]) this.formData.timer = "timeDate";
            if (item["timeDuration"]) this.formData.timer = "timeDuration";
            if (item["timeCycle"]) this.formData.timer = "timeCycle";
            if (item[this.formData.timer])
              this.formData.timerValue = item[this.formData.timer].body;
          }
        });
      }
      this.nodeElement = element;
      if (type === "el" && businessObject.$type === "bpmn:StartEvent") {
        //外置表单路径
        this.formDesignUrl = businessObject.formDesignUrl;
        this.formDesignDetailUrl = businessObject.formDesignDetailUrl;
        this.nodeFormUpdatePathUrl = businessObject.nodeFormUpdatePathUrl;
        this.nodeFormSavePathUrl = businessObject.nodeFormSavePathUrl;
      }
      if (type === "el" && businessObject.$type === "bpmn:UserTask") {
        if (businessObject.btnGroup) {
          //按钮
          let btnGroup = JSON.parse(businessObject.btnGroup);
          let formBtnList = this.formBtnList.filter(
            (obj) => obj.id != businessObject.id
          );
          btnGroup.forEach((e) => {
            (e.id = this.formData.id), (e.modalKey = this.formData.key);
            e.nodeFormPath = businessObject.formDesignUrl;
            e.nodeFormEditPath = businessObject.formDesignDetailUrl;
            e.whetherUpdate = businessObject.formEditable;
            e.nodeFormUpdatePath = businessObject.nodeFormUpdatePathUrl;
            e.nodeFormSavePath = businessObject.nodeFormSavePathUrl;
            formBtnList.push(e);
          });
          this.formBtnList = formBtnList;
        }
        if (businessObject.timeoutGroup) {
          //超时处理
          let timeoutGroup = JSON.parse(businessObject.timeoutGroup);
          let timeoutList = this.timeoutList.filter(
            (obj) => obj.id != businessObject.id
          );
          timeoutGroup.forEach((e) => {
            timeoutList.push(e);
          });
          this.timeoutList = timeoutList;
        }
        if (businessObject.formFieldList) {
          /* 表单字段 */
          let formFieldArray = JSON.parse(businessObject.formFieldList);
          let formFieldArray1 = this.formFieldArray.filter(
            (obj) => obj.id != businessObject.id
          );
          formFieldArray.forEach((e) => {
            (e.id = this.formData.id), (e.modalKey = this.formData.key);
            formFieldArray1.push(e);
          });
          this.formFieldArray = formFieldArray1;

          this.formModuleType = businessObject.formModuleType;
        }
        // 数据接受规则
        if (businessObject.$attrs.actMyNodeFormFieldList) {
          let transferDataGroup = JSON.parse(
            businessObject.$attrs.actMyNodeFormFieldList
          );
          let actMyNodeFormFieldList = this.actMyNodeFormFieldList.filter(
            (obj) => obj.postNodeId != businessObject.id
          );
          transferDataGroup.forEach((e) => {
            actMyNodeFormFieldList.push(e);
          });
          this.actMyNodeFormFieldList = actMyNodeFormFieldList;
        }
        // 节点表单uuid存储
        if (businessObject.formFieldList) {
          let actMyNodeFormListGroup = {
            nodeName: businessObject.name,
            nodeId: businessObject.id,
            formUuid: JSON.parse(businessObject.formFieldList)[0].formUuid,
          };
          let actMyNodeFormList = this.actMyNodeFormList.filter(
            (obj) => obj.nodeId != businessObject.id
          );
          actMyNodeFormList.push(actMyNodeFormListGroup);
          this.actMyNodeFormList = actMyNodeFormList;
        }
        // 动态表单
        // let formFieldArray =
        //     businessObject.extensionElements?.values
        //         .filter((item) => item.$type === "flowable:FormProperty")
        //         .map((item) => {
        //           return item;
        //         }) ?? [];
        // // if (businessObject.formFieldList) {
        // let formFieldArray1 = this.formFieldArray.filter(
        //     (obj) => obj.id != businessObject.id
        // );
        // formFieldArray.forEach((e) => {
        //   (e.id = businessObject.id), (e.modalKey = this.process.key);
        //   formFieldArray1.push(e);
        // });
        // this.formFieldArray = formFieldArray1;
        // this.formModuleType = businessObject.formModuleType;

        // let formPropertyList = [];
        // if (businessObject.extensionElements) {
        //   let list = businessObject.extensionElements.get("values");
        //   list.forEach((e) => {
        //     if (e.$type.indexOf("flowable:FormProperty") === 0) {
        //       formPropertyList.push(e.$attrs);
        //     }
        //   });
        // }
        // if (formPropertyList) {
        //   /* 表单字段 */
        //   let formFieldArray = formPropertyList;
        //   let formFieldArray1 = this.formFieldArray.filter(
        //     (obj) => obj.id != businessObject.id
        //   );
        //   formFieldArray.forEach((e) => {
        //     // e.id = this.formData.id,
        //     e.modalKey = this.formData.key;
        //     formFieldArray1.push(e);
        //   });
        //   this.formFieldArray = formFieldArray1;
        // }
        if (businessObject.notification) {
          //通知
          let notificationList =
            businessObject.notification &&
            businessObject.notification.length != 0
              ? businessObject.notification.split(",")
              : [];
          let notificationList1 = this.notificationList.filter(
            (obj) => obj.nodeId != businessObject.id
          );
          notificationList.forEach((e) => {
            notificationList1.push({
              noticeName: e,
              nodeId: this.formData.id,
              actDeModelKey: this.formData.key,
            });
          });
          this.notificationList = notificationList1;
        }
      }
    },
    // 更新表单 节点属性值
    modifyFormData(data) {
      //设置节点处理人
      this.formData.userType = data.userType;
      if (data.userType === "assignee") {
        this.formData.assignee = data.assignee;
        this.formData.assigneeName = data.assigneeName;
      } else if (data.userType === "candidateUsers") {
        this.formData.candidateUsers = data.candidateUsers;
        this.formData.candidateUsersName = data.candidateUsersName;
      } else if (data.userType === "processInitiator") {
        this.formData.processInitiator = data.processInitiator;
      } else if (
        data.userType === "candidateGroups" ||
        data.userType === "department"
      ) {
        this.formData.candidateGroups = data.candidateGroups;
        this.formData.candidateGroupsName = data.candidateGroupsName;
      } else if (data.userType === "departmentHead") {
        this.formData.departmentHead = data.departmentHead;
        this.formData.departmentHeadName = data.departmentHeadName;
      } else if (data.userType === "reportsTo") {
        this.formData.reportsTo = data.reportsTo;
        this.formData.reportsToName = data.reportsToName;
      }
    },
    setFormBtnData(type, data) {
      this.formData[type] = data;
    },
    setStarterData(type, properties) {
      this.permissionType = type;
      this.permissionValue = properties;
    },
    setAdvancedData(key, val) {
      this.advancedData[key] = val;
    },
    semicircleClick() {
      let panelDom = document.getElementsByClassName("bpmn-panel")[0];
      let semicircleDom = document.getElementsByClassName("semicircle")[0];
      if (this.fold) {
        panelDom.removeAttribute("style");
        semicircleDom.removeAttribute("style");
      } else {
        panelDom.style.width = 0;
        semicircleDom.style.right = 0;
      }
      this.fold = !this.fold;
    },
  },
};
</script>

<style lang="less">
.bpmn-panel {
  // width: 550px;
  // border: 1px solid #eeeeee;
  // padding: 0 5px;
  // overflow-y: auto;
  .tabs1 {
    .ant-tabs-nav {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      div:not(.ant-tabs-ink-bar) {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
      }
    }
  }
  .semicircle {
    width: 20px;
    height: 40px;
    border-radius: 50px 0 0 50px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #eeeeee;
    border-right: none;
    background-color: #fff;
    cursor: pointer;
    position: fixed;
    right: 450px;
    top: calc(50% - 20px);
  }
}
.config-tab {
  height: 43px;
  line-height: 43px;
  display: inline-block;
  width: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
}
.config-tab.active {
  border-bottom: solid 2px #409eff;
}
</style>
